<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title data-right-icon=''>同客</title>
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/public/public.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			html,
			body,
			.mui-content,
			.mui-scroll-wrapper,
			.mui-scroll {
				width: 100%;
			}
			.sliderpic {
				height: 200px;
			}
			.activity .active {
				border-bottom: 2px solid #fa7456;
				color: #fa7456;
			}
			.tabitem {
				float: left;
				height: 44px;
				line-height: 44px;
				padding: 0 20px;
				color: #a1a1a1;
			}
			.tabs {
				height: 44px;
				width: 222px;
				margin: 0 auto;
				overflow: hidden;
			}
			.activity {
				margin-top: -6px;
			}
			.activitytabs {
				background-color: #FFFFFF;
				margin-bottom: 10px;
			}
			.a-list {
				position: relative;
				width: 100%;
				padding: 15px 15px 10px 15px;
				background-color: #FFFFFF;
				border-bottom: 1px solid #d7d7d7;
			}
			.l-title {
				font-size: 16px;
				color: #333333;
			}
			.l-charge {
				color: #fa7456;
				font-size: 12px;
				vertical-align: middle;
			}
			.icon {
				color: #4ec6f8;
				width: 20px;
				height: 25px;
				text-align: left;
				line-height: 25px;
				float: left;
			}
			.icon span {
				font-size: 14px;
			}
			.l-addr,
			.l-time {
				overflow: hidden;
			}
			.rightover {
				overflow: hidden;
			}
			.time-text,
			.addr-text {
				height: 25px;
				line-height: 25px;
				font-size: 14px;
				color: #666666;
			}
			.interets {
				position: absolute;
				right: 15px;
				bottom: 5px;
				font-size: 14px;
				color: #666666;
				vertical-align: top;
			}
			.peo-num {
				color: #fa7456;
				font-size: 20px;
			}
			.activity {
				height: 100%;
				width: 100%;
				overflow: hidden;
			}
			.tabview {
				position: absolute;
				top: 0;
				left: 0;
				width: 300%;
				z-index: 100;
			}
			.rla {
				position: relative;
			}
			.item {
				width: 33.3333%;
				float: left;
				height: 100%;
			}
			/*test*/
			
			.test {
				margin-top: 30px;
				text-align: center;
				color: #000000;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="slide">
						<div class="mui-slider">
							<div class="mui-slider-group">
								<div class="mui-slider-item">
									<img src="../../img/slider/pic2.jpg" class="sliderpic" data-detail='' />
								</div>
								<div class="mui-slider-item">
									<img src="../../img/slider/pic1.jpg" class="sliderpic" data-detail='' />
								</div>
								<div class="mui-slider-item">
									<img src="../../img/slider/pic3.jpg" class="sliderpic" data-detail='' />
								</div>
								<div class="mui-slider-item">
									<img src="../../img/slider/pic4.jpg" class="sliderpic" data-detail='' />
								</div>
							</div>
						</div>
					</div>
					<div class="activity">
						<div class="activitytabs">
							<div class="tabs">
								<div class="tabitem hot active" data-sort='0'>热门</div>
								<div class="tabitem near" data-sort='1'>附近</div>
								<div class="tabitem new" data-sort='2'>动态</div>
							</div>
						</div>
						<div class="rla">
							<div class="tabview">
								<div class="item a-content">
								</div>
								<div class="item a-hot">
									<div class="test">附近无最新动态</div>
								</div>
								<div class="item a-new">
									<div class="test">你的好友没有新动态</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../js/libs/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/libs/template.js"></script>
	<script type="text/javascript" src="../../js/utils/tools.js"></script>
	<script type="text/html" id="ac-list">
		{{each list}}
		<div class="a-list" data-id='{{$value.id}}'>
			<div class="l-title">{{$value.name}}</div>
			<div class="l-charge">￥<span class="money">{{$value.score}}</span>起</div>
			<div class="l-addr">
				<div class="icon">
					<span class="mui-icon mui-icon-location"></span>
				</div>
				<div class="rightover time-text">
					{{$value.address}}
				</div>
			</div>
			<div class="l-time">
				<div class="icon">
					<span class="mui-icon mui-icon-navigate"></span>
				</div>
				<div class="rightover addr-text">
					{{$value.starttime}}
				</div>
			</div>
			<div class="interets">
				<span class="peo-num">{{$value.like}}</span> 感兴趣
			</div>
		</div>
		{{/each}}
	</script>
	<script>
		mui.plusReady(function() {
			var pre = ['../indexpage/activitydetail.html']
			preload(pre)
			var c = plus.webview.currentWebview();
			mui('.mui-scroll-wrapper').scroll();
			//			模拟数据
			Ajax({
				url: '/projects/list_projects'
			}, function(data) {
				console.log(JSON.stringify(data))
				var listdata = {
					list: data.datas
				}
				var html = template("ac-list", listdata);
				$('.a-content').html(html);
				var h1 = $('.a-hot').height();
				var h2 = $('.a-content').height();
				var h3 = $('.a-new').height();
				var hs = [h1, h2, h3]
				var h = max(hs)
				$('.rla').height(h)
				$('.tabview').height(h)
				plus.navigator.closeSplashscreen();
			}, function() {
				plus.navigator.closeSplashscreen();
			})
			mui('body').on('scroll', '.mui-scroll', function(e) {
				var scrollTop = $(this).position().top;
				var opener = plus.webview.getLaunchWebview();
				//				console.log(Boolean(scrollTop < 0 && Math.abs(scrollTop)))
				if (scrollTop < 0 && Math.abs(scrollTop) > 200) {
					//					var temp = Math.abs(scrollTop) - 200;
					//					if(temp==50||temp>50){
					//						temp ==50;
					//						
					//					}
					//					c.setStyle({
					//						'top':50-temp
					//					})
					mui.fire(opener, 'hideHead')
				} else if (scrollTop > 0) {
					mui.fire(opener, 'showHead')
				}
			})
			mui('.tabs').on('tap', '.tabitem', function() {
				var sortstart = parseInt($('.tabitem').filter('.active').attr('data-sort'));
				var sortend = parseInt($(this).attr('data-sort'));
				var gaps = sortend - sortstart;
				var aniparam = {};
				if (gaps > 0) {
					aniparam.left = '-=' + gaps + '00%';
				} else if (gaps < 0) {
					aniparam.left = '+=' + Math.abs(gaps) + '00%';
				} else if (gaps == 0) {
					return;
				}
				$('.tabitem').removeClass('active');
				$(this).addClass('active');
				$('.tabview').animate(aniparam, 300)
			})
			mui('.rla').on('dragend', '.tabview', function(e) {
				var sort = parseInt($('.tabitem').filter('.active').attr('data-sort'));
				var param = {};
				if (e.detail.direction == 'left') {
					sort += 1;
					if (sort == 3) {
						sort = 2;
						return;
					}
					param.left = "-=100%";
				} else if (e.detail.direction == 'right') {
					sort -= 1;
					if (sort == -1) {
						sort == 0
						return;
					}
					param.left = "+=100%";
				} else {
					return;
				}
				$('.tabitem').removeClass('active').eq(sort).addClass('active');
				$(this).animate(param, 300);
			})
			mui('.rla').on('tap', '.a-list', function() {
				var id = this.getAttribute('data-id');
				var param = {
					listid: id
				}
				var detail = plus.webview.getWebviewById('activitydetail');
				detail.show('slide-in-right', 300);
				mui.fire(detail, 'renderdata', param)
			})
		})

		function max(arr) {
			return arr.sort(function(a, b) {
				return b - a;
			})[0];
		}
	</script>

</html>